<template>
	<view :style="showGGPannel?'overflow:hidden;height:calc(100vh);width:100%;':''">
		<view @tap="clickBack" class="cuIcon-roundleftfill-copy" style="position: fixed;left: 15px;top: 28px;color: #1C232B;opacity: 0.6;font-size: 32px;z-index: 99999;"></view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="width: 100%;height: 340px;">
			<swiper-item @tap="clickImgs(index)" v-for="(item, index) in sku.imgs" :key="index">
				<image mode="aspectFill" style="width: 100%;height: 340px;object-fit: cover;" :src="item"></image>
			</swiper-item>
		</swiper>
		
		<!--秒杀-->
		<view v-if="sku.exts.skillSku!=null" class="margin-bottom flex align-center justify-between bg-gradual-red padding-lr" style="padding-top: 8px;padding-bottom: 8px;">
			<view>
				<text style="color: #FFFFFF;font-size: 11px;border: 1px solid #FFFFFF;padding: 2px 5px;border-radius: 2px;">秒杀价</text>
				<text style="font-size: 18px;margin-left: 5px;">￥{{sku.exts.skillSku.skillPrice}}</text>
				<text style="font-size: 13px;margin-left: 5px;text-decoration: line-through;">￥{{sku.priceSale}}</text>
			</view>
			<view style="text-align: center;color: #FFFFFF;padding: 0 15px;">
				<view style="font-size: 11px;">剩余时间</view>
				<view style="font-size: 13px;margin-top: 2px;">
					<text v-if="time.hour>0">{{time.hour}}:</text><text v-else>00:</text>
					<text v-if="time.minute>0">{{time.minute>9?time.minute:('0'+time.minute)}}:</text><text v-else>00:</text>
					<text v-if="time.second>0">{{time.second>9?time.second:('0'+time.second)}}</text><text v-else>00</text>
				</view>
			</view>
		</view>

		<!--正常价格-->
		<view v-else class="padding">
			<text style="color: #C5A16F;">￥</text>
			<text style="color: #C5A16F;font-size: 18px;">{{sku.priceSale}}</text>
			<text style="color: grey;text-decoration: line-through;margin: 0 10px;" v-if="sku.priceDel">￥{{sku.priceDel}}</text>
			<text style="color: #C5A16F;border: 1px solid #C5A16F;border-radius: 20px;font-size: 10px;padding: 2px 5px;margin-left: 10px;"
			 v-if="sku.priceDel">{{parseFloat(sku.priceCost/sku.priceDel*10).toFixed(2)}}折</text>
		</view>
		<!--名称-->
		<view class="padding-lr" style="font-size: 14px;color: #1C232B;letter-spacing: 2px;font-weight: bold;">{{sku.name}}</view>
		<view class="padding-lr padding-top-sm" style="font-size: 12px;color: grey;" v-if="sku.exts.spu.intro">{{sku.exts.spu.intro}}</view>
		<!--服务-->
		<view class="flex flex-wrap padding-top">
			<view class="padding-left" v-for="(item,index) in sku.exts.services" :key="index">
				<text class="cuIcon-squarecheck padding-right-xs" style="color:#C5A16F ;"></text>
				{{item.name}}
			</view>
		</view>
		
		<!--规格-->
		<view class="margin-top" style="width: 100%;height: 5px;background-color: grey;opacity: 0.1;"></view>
		<view @tap="showMengbang" class="flex justify-between align-center padding">
			<view>
				<text class="text-grey">已选规格</text>
				<text  class="margin-left cu-tag bg-white line-grey text-grey" style="background-color: #C5A16F;color: #FFFFFF;border-radius: 4px;height: unset;padding: 2px 5px;"  v-for="(attr,index) in checkedAttrs" :key="attr">{{attr}} </text>
			</view>
			<text class="cuIcon-right"></text>
		</view>

		<!--优惠券-->
		<view style="width: 100%;height: 5px;background-color: grey;opacity: 0.1;"></view>
		<view @tap="showCoupon" class="flex justify-between align-center padding">
			<view>
				<text class="text-grey">已领券</text>
				<text class="margin-left cu-tag bg-white line-grey text-grey" style="background-color: #C5A16F;color: #FFFFFF;border-radius: 4px;height: unset;padding: 2px 5px;" v-for="(item,index) in coupons" :key="item.couponId">满{{item.man}}元减{{item.price}}元 </text>
			</view>
			<text class="cuIcon-right"></text>
		</view>
		
		<!--商品评价-->
		<view class="margin-bottom" style="width: 100%;height: 5px;background-color: grey;opacity: 0.1;" v-if="comments.length>0"></view>
		<view class="flex justify-between align-center padding-lr padding-bottom" v-if="comments.length>0">
			<view><text class="text-grey">商品评价</text></view>
			<view style="color: #C5A16F;">
				<text @tap="clickMoreComment">查看全部</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view>
			<comments :datas="comments"></comments>
		</view>
		<view style="width: 100%;height: 5px;background-color: grey;opacity: 0.1;"></view>

		<!--详情-->
		<view class="parse-con">
			<u-parse :content="sku.exts.spu.content" @navigate="navigate"></u-parse>
		</view>

		<!--底部点位-->
		<view style="height: 60px;"></view>

		<!--立即购买导航-->
		<view class="flex justify-between align-center" style="height: 48px;padding: 5px;position: fixed;left: 0;bottom: 0;background-color: #FFFFFF;width: 100%;border-top: 1px solid rgba(0, 0, 0, 0.1);">
			<view class="flex justify-between text-center flex-twice padding-lr">
				<view class="text-center" @tap="clickHomeFun">
					<text class="cuIcon-home" style="font-size: 20px;"></text>
					<view class=" text-sm">首页</view>
				</view>
				<view class="text-center">
					<button open-type="contact" style="background-color: #FFFFFF;line-height: unset;border-radius: unset;color: unset;border: none;font-size: unset;">
						<text class="cuIcon-service" style="font-size: 20px;"></text>
						<view class=" text-sm">客服</view>
					</button>
				</view>
				<view @tap="clickCartFun" class="text-center" style="position: relative;">
					<text class="cuIcon-cart" style="font-size: 20px;"></text>
					<view class=" text-sm">购物车</view>
					<view v-if="cartNum>0" style="position: absolute;right: 0;top: 0;background-color: #A5673F;color: #FFFFFF;border-radius: 50%;padding: 1px 5px;font-size: 10px;">{{cartNum}}</view>
				</view>
			</view>
			<view class="flex justify-around text-center" style="line-height: 32px;" @tap="showMengbang">
				<view style="background-color: #FFFFFF;color: #C5A16F;border: 1px solid #C5A16F;padding: 0 15px;border-top-left-radius: 20px;border-bottom-left-radius: 20px;">
					加入购物车
				</view>
				<view style="color: #C5A16F;border: 1px solid #1C232B;background-color: #1C232B;padding: 0 15px;border-top-right-radius: 20px;border-bottom-right-radius: 20px;">
					立即购买
				</view>
			</view>
		</view>

		<!--弹出规格选择-->
		<view v-show="showGGPannel">
			<!-- v-show="showGGPannel"-->
			<!--蒙版-->
			<view @tap="hiddenMengbang" style="width: 100%;height: calc(100vh);background-color: rgba(0,0,0,0.2);position: absolute;top: 0;left: 0;z-index: 99999;"></view>
			<view style="height: 400px;position: fixed;left: 0;bottom: 0;background-color: #FFFFFF;width: 100%;border-top-left-radius: 10px;border-top-right-radius: 10px;z-index: 999999;">
				<view class="flex justify-start">
					<view style="margin: -20px 10px 10px 15px;">
						<image :src="sku.thumbnail" mode="aspectFill" style="max-width: 80px;height: 80px;object-fit: cover;border-radius: 4px;"></image>
					</view>
					<view class="padding">
						<text v-if="sku.exts.skillSku==undefined || sku.exts.skillSku==null">￥{{sku.priceSale}}</text>
						<!--秒杀时为秒杀价-->
						<text v-else style="color: #C5A16F;font-size: 15px;">￥{{sku.exts.skillSku.skillPrice}}</text>
						<view class="text-grey margin-top-xs">已选：
							<text class="margin-right" v-for="(item,index) in checkedAttrs" :key="item">{{item}} </text>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in sku.exts.attrs" :key="index">
					<view class="padding">{{item.name}}</view>
					<view class="padding-lr">
						<!-- <text class="cu-tag margin-right-sm" style="background-color: #C5A16F;color: #FFFFFF !important;">XXL</text> -->
						<text @tap="changeAttr(index,subindex,subitem.name)" class="cu-tag bg-white line-grey text-grey margin-right-sm"
						 :style="subindex==checkedAttrsIds[index]?'background-color: #C5A16F;color: #FFFFFF !important;':''" v-for="(subitem,subindex) in item.exts.attrItem"
						 :key="subindex">{{subitem.name}}</text>
					</view>
				</view>

				<view class="padding flex justify-between align-center">
					<text>数量</text>
					<view class="flex align-center" style="border-radius: 2px;border: 1px solid #F0F0F0;">
						<text v-if="sku.exts.skillSku==undefined || sku.exts.skillSku==null" class="cuIcon-move padding-lr-xs" style="background-color: #F0F0F0;padding: 2px 5px;" @tap="changeNum('reduce')"></text>
						<text class="padding-lr-sm">{{checkedNum}}</text>
						<text v-if="sku.exts.skillSku==undefined || sku.exts.skillSku==null" class="cuIcon-add padding-lr-xs " style="background-color: #F0F0F0;padding: 2px 5px;" @tap="changeNum('plus')"></text>
					</view>
				</view>

				<view class="flex justify-between text-center padding margin-top">
					<!--秒杀时，不能加入购物车-->
					<view v-if="sku.exts.skillSku==undefined || sku.exts.skillSku==null" @tap="clickAddCart" style="background-color: #FFFFFF;color: #C5A16F;border: 1px solid #C5A16F;padding:5px 15px;border-radius: 20px;width: 100%;">
						加入购物车
					</view>
					<view @tap="clickBuyFun" style="color: #C5A16F;border: 1px solid #1C232B;background-color: #1C232B;padding: 5px 15px;border-radius: 20px;width: 100%;margin-left: 20px;">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import comments from '@/components/devm/product/comments.vue';
	import uParse from "@/components/feng-parse/parse.vue";
	
	var intv = null;
	var cursurplus = null;
	export default {
		components: {
			comments,
			uParse
		},
		data() {
			return {
				showGGPannel: false, //展示规格弹出面板
				sku: {}, //商品对象
				comments: [], //评论
				checkedAttrs: [], //已选属性,[白色，XL，大 ...]
				checkedAttrsIds: [], //已选属性
				checkedNum: 1, //已选数量

				cartNum: 0 ,//购物车数量
				
				time: null,//秒杀计时器
				
				coupons:[],//优惠券
			};
		},
		onLoad(options) {
			this.initSkuDetail(options.id,options.skuNo,options.skillId)
			this.initCommonts(options.id,options.skuNo)
			this.getCoupons();
		},
		onShow() {
			//每次都刷新tabbar购物车数量 
			if(this.$global.data.cartNum>0) {
				this.cartNum = this.$global.data.cartNum ;
			}
		},
		onUnload() {
			clearInterval(intv);//清除计时器
		},
		onShareAppMessage() {
			//允许分享该页面
		},
		methods: {
			hiddenMengbang() {
				this.showGGPannel = false;
			},
			showMengbang() {
				this.showGGPannel = true;
			},
			clickHomeFun() {
				uni.reLaunch({
					url: '/pages/tab/index'
				})
			},clickCartFun() {
				uni.reLaunch({
					url: '/pages/tab/cart'
				})
			},
			clickBack(){
				uni.navigateBack({
					delta:1
				})
			},
			changeNum(type) {
				if (type == 'reduce') {
					this.checkedNum = (this.checkedNum > 1) ? this.checkedNum - 1 : 1;
				} else if (type == 'plus') {
					this.checkedNum = this.checkedNum + 1;
				}
			},
			getCoupons() {//优惠券
				this.$get('mall/coupon/mycoupons',{type:'normal'}).then((res) => {
					this.coupons = res.data;
				});
			},
			initSkuDetail(id,skuNo,skillId) {
				var _this = this;
				this.$get('mall/sku/commondetail', {
					id: id,
					skuNo:skuNo,
					skillId:skillId //秒杀进来的，活动ID
				}).then((res) => {
					if (res.data) {
						if (res.data.imgs) {
							res.data.imgs = JSON.parse(res.data.imgs)
						}
						_this.sku = res.data;

						//初始规格，默认第一个选中
						var item = [];
						var itemId = [];
						var attrs = res.data.exts.attrs;
						for (var k = 0; k < attrs.length; k++) {
							if(attrs[k].exts.attrItem && attrs[k].exts.attrItem.length>0) {
								var aItem = attrs[k].exts.attrItem[0];
								item.push(aItem.name);
								itemId.push(0);
							}
						}
						_this.checkedAttrs = item;
						_this.checkedAttrsIds = itemId;
						
						//处理秒杀
						if(res.data.exts.skillSku) {
							var skill = res.data.exts.skillSku.exts.skill;
							if(skill) {
								_this.startInterval();
							}
						}
					}
				})
			},
			changeAttr(index, subindex, subname) {
				//console.log('index:'+index+'   subindex:'+subindex+'   subname:'+subname)

				//强制刷新数组
				this.$set(this.checkedAttrsIds, index, subindex)
				this.$set(this.checkedAttrs, index, subname)
			},
			clickAddCart() {
				var that = this;
				
				this.$checkAuth(function(){
					for (var k = 0; k < that.checkedAttrsIds.length; k++) {
						if (that.checkedAttrsIds[k] == -1) {
							that.$msg('请选择规格')
							return;
						}
					}
					var attrName = null;
					for (var k = 0; k < that.checkedAttrs.length; k++) {
						if (attrName == null) {
							attrName = that.checkedAttrs[k];
						} else {
							attrName += '/' + that.checkedAttrs[k];
						}
					}
					that.$get('mall/cart/add', {
						skuId: that.sku.id,
						spuId: that.sku.spuId,
						skuName: that.sku.name,
						attrName: attrName,
						num: that.checkedNum,
						price: that.sku.priceSale,
						img:that.sku.thumbnail
					}, 'post').then(res => {
						that.$msg('已加入购物车')
						that.hiddenMengbang()
						that.initCartNum()
					})
				});
				
			},
			clickBuyFun() {
				var that = this;
				
				this.$checkAuth(function(){
					for (var k = 0; k < that.checkedAttrsIds.length; k++) {
						if (that.checkedAttrsIds[k] == -1) {
							that.$msg('请选择规格')
							return;
						}
					}
					var attrName = null;
					for (var k = 0; k < that.checkedAttrs.length; k++) {
						if (attrName == null) {
							attrName = that.checkedAttrs[k];
						} else {
							attrName += '/' + that.checkedAttrs[k];
						}
					}
					
					//处理价格
					var price = 0;
					var discountPrice = 0;
					var skillId = '';
					if(that.sku.exts.skillSku!=undefined && that.sku.exts.skillSku!=null) {
						//秒杀算出优惠价
						discountPrice = that.sku.priceSale - that.sku.exts.skillSku.skillPrice;
						skillId = that.sku.exts.skillSku.skillId;
					}
					
					var arr = [];
					var item = {
						refSkuId: that.sku.id,
						refSpuId: that.sku.spuId,
						name: that.sku.name,
						attrName: attrName,
						num: that.checkedNum,
						price:that.sku.priceSale,//销售价
						discountPrice:discountPrice,//优惠价格
						img:that.sku.thumbnail,
						skillId:skillId //秒杀活动ID
					};
					arr.push(item);
					uni.setStorage({
						key:'skuArr',
						data:arr,
						success() {
							that.$jump('/pages/order/fillorder')
						}
					})
				});
			},
			initCommonts(id,skuNo) {
				this.$get('mall/comment/commonpage', {
					spuId: id,
					skuNo:skuNo,
					size: 1
				}).then((res) => {
					if (res.data && res.data.items) {
						this.comments = res.data.items;
					}
				})
			},
			clickImgs(index) {//查看大图
				var that = this;
				uni.previewImage({
					urls:that.sku.imgs,
					current:index
				})
			},
			initCartNum() {
				var that = this;
				this.$get('mall/cart/count', {}).then((res) => {
					if (res.data) {
						that.cartNum = res.data;
						that.$global.changCartNum(res.data)//刷新全局变量
					}
				})
			},
			clickMoreComment() {//更多评论
				uni.navigateTo({
					url:'/pages/product/comments?skuId='+this.sku.id
				})
			},startInterval() { // 秒杀，启动倒计时
				var that = this;
				if(!this.sku.exts.skillSku || !this.sku.exts.skillSku.exts.skill) {
					return;
				}
				var endTime = that.$convertTime(that.sku.exts.skillSku.exts.skill.endTime) ;
				intv = setInterval(function() {
					if(endTime==null) {
						endTime = that.$convertTime(that.sku.exts.skillSku.exts.skill.endTime) ;
					}
					var curTime = cursurplus != null ? cursurplus : new Date().getTime();
					cursurplus = curTime + 1000;
					//计算剩余时间
					var surplus = endTime - cursurplus;
					var hour = surplus / 1000 / 60 / 60; //剩余小时
					// console.log('hour - ' + hour);
					var inthour = parseInt(hour);
					var minute = inthour > 0 ? (hour % inthour * 60) : (hour * 60); //分钟
					// console.log('minute - ' + minute);
					var intminute = parseInt(minute);
					var second = intminute > 0 ? (minute % intminute * 60) : (minute * 60); //秒
					// console.log('second - ' + second);
					var intsecond = parseInt(second);
					// console.log('inthour:' + inthour + '    intminute:' + intminute + '   intsecond:' + intsecond);

					that.time = {
						hour: inthour,
						minute: intminute,
						second: intsecond
					}
					if (isNaN(inthour) && isNaN(intminute) && isNaN(intsecond)) {
						that.sku.exts.skillSku = null;
						clearInterval(intv)
					}
					if (inthour == 0 && intminute == 0 && intsecond == 0) {
						that.sku.exts.skillSku = null;
						clearInterval(intv)
					}
				}, 1000);
			},
			showCoupon() {
				uni.navigateTo({
					url:'/pages/mine/coupon?onlyReceive=true'
				})
			}
		}
	};
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.parse-con image {
		min-width: 100% !important;
	}
	
	button:after {
		border: none !important;
	}
</style>
